$(function () {
	$("#divideU").addClass("layui-btn-disabled").prop("disabled" , true);//选择数据后放开，初始化禁用
	$("#divideM").addClass("layui-btn-disabled").prop("disabled" , true);//选择数据后放开，初始化禁用
});	
//准备视图部门下拉框对象
window.viewObj = {  	
	typeData: [
		{dataScope: 1, name: '全部数据'},
		{dataScope: 2, name: '辖内部门'},
		{dataScope: 3, name: '仅本部门'},
		/*{dataScope: 4, name: '自定义'}*/
	],
	renderSelectOptions: function(data, settings){
		settings =  settings || {};
		var valueField = settings.valueField || 'value',
			textField = settings.textField || 'text',
			selectedValue = settings.selectedValue || "";
		var html = [];
		for(var i=0, item; i < data.length; i++){
			item = data[i];
			html.push('<option value="');
			html.push(item[valueField]);
			html.push('"');
			if(selectedValue && item[valueField] == selectedValue ){						
				html.push(' selected="selected"');
			}			
			html.push('>');		
			html.push(item[textField]);
			html.push('</option>');
		}
		return html.join('');
	}
};
	
//layui 模块化引用
layui.use(['table', 'layer','tree'], function(){
	//$ = layui.$,
	var  table = layui.table, form = layui.form, layer = layui.layer,tree = layui.tree;
	//数据表格实例化			
	var tableIns = table.render({
		elem: '#dataTable',
		id: "layTable",
		url:"/role/list",
		//where:{'roleName':'管理'},
		//data:tbData,
		width: $("#tableRes").width(),
		height:455,
		page: true,
		loading: true,
		even: false, //不开启隔行背景
		parseData: function(result){ //将原始数据解析成 table 组件所规定的数据
	      return {
	        "code": result.success==true?'0':'XXX', //解析接口状态
	        "msg": '查询成功', //解析提示文本
	        "count": result.data.count, //解析数据长度
	        "data": result.data.data //解析数据列表
	      };
		},
		cols: [
			[
			{title: '#', type:'radio'},
			{title: '序号', type: 'numbers',align:'center',},
			{field: 'rid', hide: true},
			{field: 'roleName', title: '角色名称'},
			{field: 'roleKey', title: '权限字符'},
			{field: 'dataScope', title: '数据权限',align:'center',
				templet: function(d){
					var options = viewObj.renderSelectOptions(viewObj.typeData, {valueField: "dataScope", textField: "name", selectedValue: d.dataScope});
					return '<a id="ds"></a><select  name="dataScope" lay-filter="dataScope"><option value="">请选择分类</option>' + options + '</select>';
				}
			},
			{field: 'status', title: '是否启用', width:80, align:'center',
				templet: function(d){
					var html = ['<input type="checkbox" name="status" lay-skin="switch" lay-text="是|否"'];
					html.push(d.status == 0 ? ' checked' : '');
					html.push('>');
					return html.join('');
				}
			},					
			{field: 'createTime',title: '创建时间',width:200,templet :function(d){
				return	"<div>"+layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')+"</div>"}},
			{field: 'description', title: '角色描述',width:120},
			{field: 'tempId', title: '操作',align:'center',templet: function(d){
				var html='';
				if($("#role-remove").val()){
					html+='<a class="layui-btn layui-btn-xs" lay-event="remove" lay-id="'+ d.rid +'"><i class="layui-icon layui-icon-delete"></i>移除</a>';
				}
				if($("#role-onAndoff").val()){
					html+='<a class="layui-btn layui-btn-xs" lay-event="edit" lay-id="'+ d.rid +'"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
				}
				return html;
			}}
			]
		],
	});
	 //监听行里的下拉框，单选框,删除按钮：当场调后台方法
	table.on('tool(dataTable)', function (obj) {
		var data = obj.data, 
		event = obj.event, 
		tr = obj.tr; //获得当前行 tr 的DOM对象;
		switch(event){
			case "dataScope":
				var select = tr.find("select[name='dataScope']");
				if(select){						
					var selectedVal = select.val();
					if(!selectedVal){
						layer.tips("请选择一个分类", select.next('.layui-form-select'), { tips: [3, '#FF5722'] }); //吸附提示
					}
				}
				break;
			case "status":
				var stateVal = tr.find("input[name='status']").prop('checked') ? 0 : 1;
				var tableData = table.cache['layTable'];//表格id
				tableData[tr.data('index')][event] = stateVal;//将值更新到缓存
				break;						
			case "remove":
				layer.confirm('确定删除？', function(index){
				  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
				  layer.close(index);
				  activeByType('removeEmptyTableCache',data.rid);
				});
				break;	
			case "edit":
				if(tr.find("a[lay-event='edit']")[0].innerText=='编辑'){//打开编辑样式，放开行内编辑
					tr.find("td[data-field='roleName']").attr('data-edit','text');
					tr.find("td[data-field='roleKey']").attr('data-edit','text');
					tr.find("td[data-field='description']").attr('data-edit','text');
					tr.find("td[data-field='status']").attr('lay-event','status');
					tr.find("a[id='ds']").attr('lay-event',"dataScope");
					
					tr.find("a[lay-event='edit']").css({'color':'red'});//给个标记按钮变红色
					tr.find("a[lay-event='edit']").html('');//按钮清空
					tr.find("a[lay-event='edit']").append('<i class="layui-icon layui-icon-ok"></i>保存');//重新赋值
				}else{
					activeByType('updateRow',data);//更新行数据 
				}
				break;
		}
});

	//激活事件
	activeByType = function (type, arg) {
		if(arguments.length === 2){					
			active[type] ? active[type].call(this, arg) : '';
		}else{
			active[type] ? active[type].call(this) : '';
		}
	}
		
	//定义事件集合
	var active = {
		addRow: function(){	//界面添加一行
			var newData = [{del_flag:0,roleName:'填写名称',roleKey: 'common', dataScope: 1, status: 0,description:"添加描述"}];				
			//后台保存
		    $.ajax({
		        url: "/role/saveRoles",
		        method:"post",
		        dataType: 'json',
		        contentType:"application/json",
		        data:JSON.stringify(newData),
		        success: function (result) {
			        if(result.success){
			        	$("#key").val("");
			        	table.reload('layTable',{where: {'roleName':""}});
		        	}
				}
			});
		},
		updateRow: function(data){
		    $.ajax({
		        url: "/role/updateRole",
		        method:"post",
		        dataType: 'json',
		        contentType:"application/json",
		        data:JSON.stringify(data),
		        success: function (result) {
			        if(result.success){
			        	$("a[lay-id='"+data.rid+"']").removeAttr("style");//移除编辑状态的红色
			        	tableIns.reload();
			        	layer.msg('修改成功');
		        	}
				}
			});	
		},
		removeEmptyTableCache: function(rid){		
			//后台删除
		    $.ajax({
		        url: "/role/removeRole?rid="+rid,
		        method:"get",
		        dataType: 'json',
		        success: function (result) {
			        if(result.success){
			        	layer.msg('删除成功');
			        	tableIns.reload();
		        	}
				}
			});
		},
		//分配用户
		divideUser:function(data){
			 layer.open({
                   type:1,//类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                   area:['600px','500px'],//定义宽和高
                   title:['为角色【<span style="color:red;">'+data.roleName+'</span>】分配用户','background-color: #009688;color:aliceblue;'],//题目
                   shadeClose:false,//点击遮罩层关闭
                   content: $('#app'),//打开的内容
                   skin:'my-btn',//确定按钮样式
                   btn: ['关闭'],//按钮
			 	   closeBtn: 0,
		 		   yes: function(index, layero){//确定按钮回调
		 			  layer.closeAll("page");//关闭模态框
		 			  location.reload();//刷新页面 不然layui的jquery和本身的冲突导致弹出框内容重复
		 		   },
                   success: function(layero, index){//弹出成功回调
                	   /*****分配用户的穿梭组件***/
                	   layui.config({
               				base:'/static/layui/'
               			}).use('transferTable', function(){
                		    var transferTable = layui.transferTable;
               				var cols1 = [{checkbox: true},{field:'uid',hide: true},{field:'username', title: '未分配用户',align:'center'}]
               				var cols2 = [{checkbox: true},{field:'uid',hide: true},{field:'username', title: '已分配用户',align:'center'}]
               				transferTable.render({
	               				elem: '#transferRoot'
	               				,url: ['/user/getUserWithoutRole?roleId='+data.rid,'/user/getUserWithRole?roleId='+data.rid]
	               				,cols: [[cols1],[cols2]]
	               				,page: [{limit:10, layout:['prev', 'page', 'next','count']},false]
	               				,id:['table_left','table_right']
	               				,height:[362,362]
	               				,id_name:'uid'
	           					,parseData: function(result){ //将原始数据解析成 table 组件所规定的数据
	               				      return {
	               				        "code": result.success==true?'0':'XXX', //解析接口状态
	               				        "msg": '查询成功', //解析提示文本
	               				        "count": result.data.total, //解析数据长度
	               				        "data": result.data.data //解析数据列表
	               				      };
	           					}
               			})

                	   })
                	   $("#roleId").val(data.rid);//隐藏域赋值
                   }
              });
		},
		//分配权限
		divideMenu:function(data){
			 layer.open({
	                   type:1,//类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	                   area:['300px','450px'],//定义宽和高
	                   title:['为角色【<span style="color:red;">'+data.roleName+'</span>】授予权限','background-color: #009688;color:aliceblue;'],//题目
	                   shadeClose:false,//点击遮罩层关闭
	                   content: $('#mpp'),//打开的内容
	                   skin:'my-btn',//确定按钮样式
		               btn: ['确定']//按钮
		               ,yes: function(index, layero){//确定按钮回调
			           		var nodes=$.fn.zTree.getZTreeObj("menuTree").getCheckedNodes(true);//获取所有选中节点
			        		//后台保存
			        		$.ajax({
			        	        url: "/menu/divideMenus",
			        	        method:"post",
			        	        dataType: 'json',
			        	        //contentType : 'application/json',
			        	        data:{roleId:$("#roleId").val(),datas:JSON.stringify(nodes)},//取得隐藏域值roleId做条件
			        	        success: function (result) {
			        		        if(result.success){
			        		        	layer.closeAll("page");//关闭模态框
			        		        	toastr.success("权限分配成功!","提示");
			        	        	}
			        			}
			        		});
		               },
	                   success: function(layero, index){//弹出成功
	                	   $("#roleId").val(data.rid);//隐藏域赋值
	                	   initMenuTree(data.rid);//加载菜单树                	   
	                   }
	              });
		},
		search:function(data){
			roleName=$("#key").val();
			table.reload('layTable',{
		        where: {'roleName':roleName}
		    });
		},
		userSearch:function(){
			var value=$("#user_key").val();
			table.reload('table_left',{page:{curr:1},where:{'username':value}})
		}
	}
				
		//注册工具栏按钮事件：新增，分配用户，分配权限等按钮
		$('.layui-btn[data-type]').on('click', function () {
			var type = $(this).data('type');
			activeByType(type,rowData);
		});
		
		
		
		//监听select下拉选中事件
		form.on('select(dataScope)', function(data){
			debugger;
			var elem = $(data.elem);
			var trElem = elem.parents('tr');
			elem.prev("a[lay-event='dataScope']").trigger("click");
			var tableData = table.cache['layTable'];//表格id
			tableData[trElem.data('index')][elem.attr('name')] = data.elem.value;//选择的值赋给缓存
		});
		

		//监听是否勾选第一列单选框
		var rowData;
		table.on('radio(dataTable)', function(obj){
			rowData=obj.data;
			if(rowData.rid){
				$("#divideU").removeClass("layui-btn-disabled").prop("disabled",false);//放开分配用户按钮
				$("#divideM").removeClass("layui-btn-disabled").prop("disabled",false);//放开分配用户按钮
			}else{
				$("#divideU").addClass("layui-btn-disabled").prop("disabled" , true);//新增为保存的角色不可分配
				$("#divideM").addClass("layui-btn-disabled").prop("disabled" , true);//新增为保存的角色不可分配
			}
		});
	

});

//查询
function onInputchange(){
	activeByType('userSearch');
}
/**************************分配权限时展示的菜单树*************************************/
		var setting = {
		view: {
			selectedMulti: true,
			showIcon: false
		},
		check: {
			enable: true
		},
		data: {
            key: {
                children: "childs",
                name: "menuName",
            },
			simpleData: {
				enable: true,
                idKey: "menuId",
                pIdKey: "parentId", 
                rootPId:null
			}
		},
		callback: { 
		 	onClick: function (e, treeId, treeNode, clickFlag) { //单击选中节点
		 		$.fn.zTree.getZTreeObj(treeId).checkNode(treeNode, !treeNode.checked, true); 
		 	}, 
		 	beforeExpand: function(treeId,currNode){
				var cLevel = currNode.level;
				//这里假设id是唯一的
				var cId = currNode.menuId;
				//此对象可以保存起来，没有必要每次查找
				var treeObj = $.fn.zTree.getZTreeObj("menuTree");
				//展开的所有节点，这是从父节点开始查找（也可以全文查找）
				var expandedNodes = treeObj.getNodesByParam("open", true, currNode.getParentNode());
				for(var i = expandedNodes.length - 1; i >= 0; i--){
					var node = expandedNodes[i];
					var level = node.level;
					var menuId = node.menuId;
					if (cId != menuId && level == cLevel) {
						treeObj.expandNode(node, false);
					}
				}
		 	},
		 	beforeCheck: function (treeId, treeNode){
		 		/*if(treeNode.menuId=='0'){
		 			return false;
		 		}*/
		 	}
		},
	};
	//查数据初始化菜单树
	function initMenuTree(roleId){
		$.ajax({
	        url: "/menu/getAllMenusByRoleId?roleId="+roleId,
	        cache: false,
	        dataType: 'json',
	        success: function (result) {
		        if(result.success){
		        datas=result.data;
				$(document).ready(function(){
					$.fn.zTree.init($("#menuTree"),setting,datas);//.expandAll(false);
		            var menuTree = $.fn.zTree.getZTreeObj("menuTree");
		            var nodes = menuTree.getNodes();
		            for (var i = 0; i < nodes.length; i++) { //设置节点展开
		            	menuTree.expandNode(nodes[i], true, false, true);
		            	var nodespan = nodes[i].childs;
						for(var j = 0; j < nodespan.length; j++) { //设置节点展开第三级节点
							menuTree.expandNode(nodespan[j], true, false, true);
						}
		            }
				});
		        }
	        }
		});    
	} 


